<template>
    <BasicDrawer
      v-bind="$attrs"
      :title="getTitle"
      @register="acceptedDrawer"
      width="50%"
      showFooter
      :showOkBtn="false"
    >
      <Description @register="register" class="mt-4" />
      
      <a-descriptions title="" bordered>
        <a-descriptions-item label="描述" bordered>
          <!-- 添加 Divider 组件 -->
          <a-divider />
          <div v-html="baseInfo.description" style="width: 100%; max-width: 100%; overflow: auto; border: 1px solid #ccc; padding: 10px;"></div>
        </a-descriptions-item>
      </a-descriptions>
      <a-divider>受理情况</a-divider>
      
      <a-button type="primary" @click="showDrawer">受理</a-button>
      <a-switch v-model:checked="checked" />

      <!-- 添加一些常用的 Ant Design Vue 组件 -->
      <a-card title="工单流程" :bordered="false">
        <a-form :model="formData" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
          <a-form-item label="故障标题">
            <a-input v-model:value="formData.title" placeholder="请输入故障标题" />
          </a-form-item>
          
          <a-form-item label="故障类型">
            <a-select v-model:value="formData.type" placeholder="请选择故障类型">
              <a-select-option value="1">硬件故障</a-select-option>
              <a-select-option value="2">软件故障</a-select-option>
              <a-select-option value="3">网络故障</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="故障描述">
            <a-textarea v-model:value="formData.description" :rows="4" placeholder="请输入故障描述" />
          </a-form-item>

          <a-form-item :wrapper-col="{ offset: 4 }">
            <a-button type="primary" @click="handleSubmit">提交</a-button>
            <a-button style="margin-left: 10px" @click="handleReset">重置</a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </BasicDrawer>
  </template>

  <script setup lang="ts">
    import { ref } from 'vue';
    
    import { Description, useDescription } from '@/components/Description';
    import { detailSchema } from './data';
    import { DescItemSizeEnum } from '@/enums';
    import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
    import { getOpFaultProcessApi } from '@/api/operations/faultprocess.api';

    const baseInfo = ref({});
    const checked = ref(false);

    /** 标题初始化 */
    const getTitle = ref('故障受理');

    const [register, { setDescProps }] = useDescription({
        title: '工单流程详情',
        schema: detailSchema,
        column: DescItemSizeEnum.DEFAULT,
    });

    const [acceptedDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
      setDrawerProps({ loading: true, confirmLoading: false });
      baseInfo.value = await getOpFaultProcessApi(data.record.id);
      getTitle.value = '故障受理:' + baseInfo.value.title;

      setDescProps({ data: baseInfo });

      setDrawerProps({ loading: false });
    });

    function showDrawer(){
        console.log(baseInfo.value);
    }

    const formData = ref({
      title: '',
      type: undefined,
      description: ''
    });

    const handleSubmit = () => {
      console.log('表单数据：', formData.value);
    };

    const handleReset = () => {
      formData.value = {
        title: '',
        type: undefined,
        description: ''
      };
    };
  </script>

  <style>
div[v-html] img {
  max-width: 100%;
  height: auto;
}

.accepted-container {
  padding: 24px;
}
  </style>

